import React,{useState,useEffect } from 'react'
import '../css/yym/ProblemFeedback.css'
import { Table, Pagination } from 'antd';
import axios from '../utool/axios'

export default function ProblemFeedback() {
    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '数据来源',
            dataIndex: 'source',
            key: 'source',
        },
        {
            title: '公厕名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '地址',
            dataIndex: 'addr',
            key: 'addr',
        },
        {
            title: '反馈内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '反馈人',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '联系方式',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '反馈时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            dataIndex: 'operate',
            key: 'operate',
            render: (_, record, index) => (
                <div>
                    <button type='primary' className='td-btn' onClick={() => {
                        moreInfo(record, index)
                    }}>详情</button>
                </div>
            )
        }
    ]

    const moreInfo = (record, index) => {
        console.log(record, index);
    }

    const [data,setData]=useState([])

    const [leng,setLeng]=useState(0)

    const onChange = (a, b) => {
        console.log(a, b)
    }

    const [pagesize,setPagesize]=useState(2)

    const getdata =async (page, pageSize) => {
        let res=await axios.get(`/yym/getProblemInfo?page=${page}&pageSize=${pageSize}`)
        setData(res.data.data)
        setLeng(res.data.len)
    }

    useEffect(()=>{
        getdata(1,pagesize)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    return (
        <div>
            {/* 标题 */}
            <div className='title'>
                问题反馈记录
            </div>

            {/* 搜索 */}
            <div className='search'>
                <div className='inp'>
                    <div className='block1'>
                        <div className='spa'>数据来源</div>
                        <div>
                            <input type="text" className='input' />
                        </div>
                    </div>
                    <div className='block'>
                        <div className='spa'>公厕名称</div>
                        <div>
                            <input type="text" className='input' />
                        </div>
                    </div>
                    <div className='block'>
                        <div className='spa'>反馈人</div>
                        <div>
                            <input type="text" className='input' />
                        </div>
                    </div>
                    <div className='block'>
                        <div className='spa'>状态</div>
                        <div>
                            <select name="" id="" className='input'>
                                <option value="全部">全部</option>
                                <option value="未处理">未处理</option>
                                <option value="已处理">已处理</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div className='btn'>
                    <button className='butt1'>查询</button>
                    <button className='butt2'>重置</button>
                </div>
            </div>

            {/* 表格 */}
            <div className='table-card'>
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    rowSelection={{ type: 'checkbox', onChange: onChange }}
                />

                <div className='pages'>
                    <div>
                        共 <span>{leng}</span> 条
                    </div>

                    <div style={{marginLeft:'10px'}}>
                        每页
                        <select name="" id="sel" onChange={(e)=>{
                            setPagesize(e.target.value)
                            getdata(1, e.target.value)
                        }}>
                            <option value="2">2</option>
                            <option value="4">4</option>
                            <option value="6">6</option>
                            <option value="8">8</option>
                        </select>
                        条
                    </div>

                    <Pagination
                        total={leng}
                        defaultPageSize={pagesize}
                        pageSize={pagesize}
                        defaultCurrent={1}
                        onChange={(page,pagesize)=>{
                            getdata(page,Number(pagesize))
                        }}
                    />
                </div>
            </div>
        </div>
    )
}
